import { Button, Card, Empty } from 'antd';
import React, { useState, useMemo } from 'react';
import { IRightSwitchDataInfoAPI } from './type';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';
import { getColorTextLoadMap } from '@/utils';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import pageStyles from '@/common/pageLayout.less';
import './styles.less';

/**
 * @description: 资产申请 右侧展示公共组件
 * @param {Array} renderList 渲染的数据
 * @param {Array} renderListColumns 列表格式
 * @param {string} title 卡片标题
 * */
export const RightSwitchDataInfo: React.FC<IRightSwitchDataInfoAPI> = ({
  renderList,
  renderListColumns,
  title,
  isShowSwitch = true,
  ...otherProps
}) => {
  /**
   * css 类名
   * */
  const prefixCls = 'rightswitch-datainfo-';

  const [initIndex, setInitIndex] = useState<number>(1);

  /**
   * 左右按钮 事件
   * */
  const switchBtn = {
    leftBtn() {
      if (initIndex > 1) {
        setInitIndex(initIndex - 1);
      }
    },
    rightBtn() {
      if (initIndex < renderList.length) {
        setInitIndex(initIndex + 1);
      }
    },
  };

  const renderFN = (text: any, type: any, addonAfter: any) => {
    if (text == 0 || text) {
      if (type) {
        return (
          <>
            {type?.[text]}&nbsp;{addonAfter}
          </>
        );
      } else {
        return (
          <>
            {text}&nbsp;{addonAfter}
          </>
        );
      }
    } else {
      return '--';
    }
  };

  /**
   * 渲染数据列表方法
   * @param valueText 数据内容
   * @param valueType 是否是字段  true:是   false:不是
   */
  const renderValueDom = (
    valueText: string,
    valueType: boolean,
    addonAfter: any,
    isTimeDate: boolean,
    isRenderType?: Record<string, any>,
  ) => {
    if (valueType) {
      const { colorText, color } = getColorTextLoadMap(valueText);
      return (
        <div
          className={prefixCls + 'cardBoxContent-listItem-value'}
          style={{
            color: color,
          }}
        >
          {colorText || '--'}
        </div>
      );
    } else {
      return (
        <div className={prefixCls + 'cardBoxContent-listItem-value'}>
          {isTimeDate ? (
            <>{valueText?.split(' ')?.[0] || '--'}</>
          ) : (
            <>{renderFN(valueText, isRenderType, addonAfter)}</>
          )}
        </div>
      );
    }
  };

  /**
   * 监听变量  渲染内容
   * */
  const renderMemo = useMemo(() => {
    let items = renderList?.[initIndex - 1];
    if (!items) {
      if (renderList?.length) {
        items = renderList?.[0];
        setInitIndex(1);
      } else {
        return [];
      }
    }

    return renderListColumns?.map((item, index) => {
      return (
        <div
          className={prefixCls + 'cardBoxContent-listRenderBox'}
          key={new Date()?.getTime() + item?.TabName + index}
        >
          {isShowSwitch && (
            <div className={prefixCls + 'cardBoxContent-listTopTitle'}>
              {item?.TabName}
            </div>
          )}
          {item?.Children?.map((ite: any) => {
            return (
              <div
                className={prefixCls + 'cardBoxContent-listItem'}
                key={new Date()?.getTime() + ite?.icon + ite?.name}
              >
                <MyIcon
                  type={ite?.icon}
                  className={prefixCls + 'cardBoxContent-listItem-icon'}
                />
                <div
                  style={{ color: 'color: rgba(0,0,0,.65)' }}
                  className={prefixCls + 'cardBoxContent-listItem-name'}
                >
                  {ite?.name}：
                </div>
                {ite?.isDict ? ( //判断是不是数据字典
                  <>{renderValueDom(items[ite?.key], true, '', false)}</>
                ) : (
                  <>
                    {renderValueDom(
                      items[ite?.key],
                      false,
                      ite?.addonAfter,
                      ite?.isTimeDate,
                      ite?.renderType,
                    )}
                  </>
                )}
              </div>
            );
          })}
        </div>
      );
    });
  }, [initIndex, renderList, renderListColumns, isShowSwitch]);

  return (
    <div
      style={{
        flex: 'auto',
        overflow: 'hidden',
      }}
    >
      <Card
        title={title}
        className={pageStyles['page-view-cardView']}
        bodyStyle={{
          padding: '5px 0px',
        }}
        {...otherProps}
      >
        {renderMemo && renderMemo?.length ? (
          <div className={prefixCls + 'cardBox'}>
            {/* top */}
            {isShowSwitch && (
              <div className={prefixCls + 'cardBoxTop'}>
                <Button
                  type={'link'}
                  icon={<DoubleLeftOutlined />}
                  className='manageBtntTxtStyle'
                  onClick={switchBtn?.leftBtn}
                  disabled={initIndex == 1 ? true : false}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON'
                      ? event?.target?.blur()
                      : event.target.parentNode.blur();
                  }}
                />
                <div className={prefixCls + 'cardBoxTop-div'}>
                  共&nbsp;&nbsp;<span>{renderList?.length}</span>
                  &nbsp;&nbsp;个，当前第&nbsp;&nbsp;<span>{initIndex}</span>
                  &nbsp;&nbsp;个
                </div>
                <Button
                  type={'link'}
                  icon={<DoubleRightOutlined />}
                  className='manageBtntTxtStyle'
                  onClick={switchBtn?.rightBtn}
                  disabled={initIndex == renderList?.length ? true : false}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON'
                      ? event?.target?.blur()
                      : event.target.parentNode.blur();
                  }}
                />
              </div>
            )}
            {/* Content */}
            <div className={prefixCls + 'cardBoxContent'}>
              <ScrollBarLayout>{renderMemo}</ScrollBarLayout>
            </div>
          </div>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </Card>
    </div>
  );
};
